<template>
  <div class="col-span-12 p-4 rounded border border-stone-300">
    <div class="mb-4 flex items-center justify-between">
      <h3 class="flex items-center gap-1.5 font-medium">
        <!-- SVG placeholder for FiDollarSign -->
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-dollar-sign"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
        Recent Transactions
      </h3>
      <button class="text-sm text-violet-500 hover:underline">
        See all
      </button>
    </div>
    <table class="w-full table-auto">
      <TableHead />
      <tbody>
        <TableRow
          v-for="(transaction, index) in transactions"
          :key="transaction.cusId + index" 
          :cusId="transaction.cusId"
          :sku="transaction.sku"
          :date="transaction.date"
          :price="transaction.price"
          :order="index + 1"
        />
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Define interfaces for TableHead and TableRow props if needed, or define components directly

// Placeholder components (can be defined inline or in separate files)
const TableHead = {
  template: `
    <thead>
      <tr class="text-sm font-normal text-stone-500">
        <th class="text-start p-1.5">Customer ID</th>
        <th class="text-start p-1.5">SKU</th>
        <th class="text-start p-1.5">Date</th>
        <th class="text-start p-1.5">Price</th>
        <th class="w-8"></th>
      </tr>
    </thead>
  `
};

const TableRow = {
  props: {
    cusId: String,
    sku: String,
    date: String,
    price: String,
    order: Number,
  },
  template: `
    <tr :class="order % 2 ? 'bg-stone-100 text-sm' : 'text-sm'">
      <td class="p-1.5">
        <a
          href="#"
          class="text-violet-600 underline flex items-center gap-1"
        >
          {{ cusId }}
          <!-- SVG placeholder for FiArrowUpRight -->
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right inline"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
        </a>
      </td>
      <td class="p-1.5">{{ sku }}</td>
      <td class="p-1.5">{{ date }}</td>
      <td class="p-1.5">{{ price }}</td>
      <td class="w-8">
        <button class="hover:bg-stone-200 transition-colors grid place-content-center rounded text-sm size-8">
          <!-- SVG placeholder for FiMoreHorizontal -->
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
        </button>
      </td>
    </tr>
  `
};

// Sample transaction data
const transactions = ref([
  { cusId: "#48149", sku: "Pro 1 Month", date: "Aug 2nd", price: "$9.75" },
  { cusId: "#1942s", sku: "Pro 3 Month", date: "Aug 2nd", price: "$21.25" },
  { cusId: "#4192", sku: "Pro 1 Year", date: "Aug 1st", price: "$94.75" },
  { cusId: "#99481", sku: "Pro 1 Month", date: "Aug 1st", price: "$9.44" },
  { cusId: "#1304", sku: "Pro 1 Month", date: "Aug 1st", price: "$9.23" },
  { cusId: "#1304", sku: "Pro 3 Month", date: "Jul 31st", price: "$22.02" },
]);

</script>

<style scoped>
/* Add any specific styles for RecentTransactions if needed */
</style>